<template>
	<el-table :data="BrandList" style="width: 100%" empty-text="尚未添加品牌" class="table_edit" :row-class-name="className" @selection-change="handleSelectionChange">
		<el-table-column width="90px">
			<template slot-scope="scope">
				<img :src="scope.row.image_url" width="45" height="45">
			</template>
		</el-table-column>
		<el-table-column label="品牌名称" prop="brand_name">
		</el-table-column>
		<el-table-column prop="created_at" label="创建时间" width="260">
		</el-table-column>
		<el-table-column label="排序" width="304">
			<template slot-scope="scope">
				<el-button @click="top(scope.$index, BrandList)" type="text" size="small">
					<i class="iconfont icon-zhiding f12"></i>
				</el-button>
				<el-button @click="up(scope.$index, BrandList)" type="text" size="small">
					<i class="iconfont icon-shangyi f12"></i>
				</el-button>
				<el-button @click="down(scope.$index, BrandList)" type="text" size="small">
					<i class="iconfont icon-xiayi f12"></i>
				</el-button>
				<el-button @click="bottom(scope.$index, BrandList)" type="text" size="small">
					<i class="iconfont icon-zhidi f12"></i>
				</el-button>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="116">
			<template slot-scope="scope">
				<el-button @click="updateRow(scope.$index, BrandList)" style="margin-right: 3px" type="text" size="small" class="btn-delete">编辑</el-button>|<el-button @click="deleteRow(scope.$index, BrandList)" style="margin-left: 3px" type="text" size="small" class="btn-delete">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
	import { brandDelete } from "@/api/commodity"

	export default {
		data() {
			return {
				className: function(row, index) {
					if(row.isActive) {
						return "active"
					}
				}
			}
		},
		props: ['BrandList'],
		methods: {
			//删除整个分类
			deleteRow(index, arr) {
				if(arr[index].products_count > 0) {
					this.$confirm('该品牌下已添加商品，如欲删除该品牌，请先移除或清空该品牌下商品', '温馨提示', {
						lockScroll: false
					}).then(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}else{
					this.$confirm('该品牌下暂未添加商品，确定要删除该品牌吗？', '温馨提示', {
						lockScroll: false
					}).then(() => {
						this.delete(index,arr)
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			delete(index,arr) {
				let id = arr[index].id
				brandDelete(id).then((res)=>{
					this.$store.dispatch("doBrandList");
					this.$emit('deleteRow');
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch((error)=>{
					this.$message({
						type: 'info',
						message: '删除失败'
					});
				})
			},
			updateRow(index, arr) {
				this.$emit('edit',index)
			},
			swapItems(arr, index1, index2) {
				let ids = [];

				ids.push(arr[index1].id)
				if(isNaN(index2)){
					ids.push(index2)
				}else{
					ids.push(arr[index2].id)
				}
				this.$emit('changeSort',ids)
			},
			top(index, arr) {
				if(index == 0) {
					return;
				}
				this.swapItems(arr,index,'top');
			},
			bottom(index, arr) {
				if(index == arr.length - 1) {
					return;
				}
				this.swapItems(arr,index,'bottom');
			},
			up(index, arr) {
				if(index == 0) {
					return;
				}
				this.swapItems(arr, index, index - 1);
			},
			down(index, arr) {
				if(index == arr.length - 1) {
					return;
				}
				this.swapItems(arr, index, index + 1);
			},
			handleSelectionChange(arr) {
				var emptyDelt=false;
				if(arr.length===0){
					emptyDelt=true
				}
				this.$emit("emptyDelt",emptyDelt);
				
		    	let created = true;
		    	if (arr.length == 0) {
		      		created = false;
		    	}
				for(let val of arr){
					val.created = created;
					if (val.is_final == 0) {
		        		for (let v of val.sub) {
		          			v.created = created;
		        		}
		      		}
				}
			},
			SelectionChildChange(parent, child, index) {
				let parent_created = true;
				for(let val of parent.sub) {
					if(val.created == false) {
						parent_created = false;
					}
				}
			},
			verify(arr) {
				if(arr.shop_category_name) {
					arr.isWarn = false;
				}
			}
		}
	}
</script>

<style lang="scss" scope>
	.el-table tr {
		height: 65px
	}
	.el-table th,
	.el-table__footer-wrapper thead div,
	.el-table__header-wrapper thead div {
		background: #F0F4F7;
	}
	
	.el-table--enable-row-hover .el-table__body tr:hover>td,
	.el-table__expanded-cell:hover {
		background: #fff !important;
	}
	
	.table_edit {
		border: 0;
		font-size: 12px;
		&:before {
			height: 0;
		}
		&:after {
			width: 0;
		}
		.el-table__empty-block {
			border-bottom: 1px solid #dfe6ec;
		}
		.cell:first-child {
			text-overflow: clip;
		}
		.el-table__body .el-table__row:hover>td,
		.expanded-box:hover {
			background: #F8FAFC !important;
		}
		.el-table__row.active {
			background: #EEF6FD;
		}
		.el-button.add-child {
			width: 96px;
			height: 24px;
			line-height: 24px;
			padding: 0;
		}
		.el-checkbox__input.is-checked .el-checkbox__inner {
			border-color: #0070C9;
			background: #0070C9;
		}
		.el-checkbox__inner {
			width: 16px;
			height: 16px;
			border-radius: 2px;
			&:hover {
				border-color: #7F7F7F;
			}
		}
		td {
			box-sizing: border-box;
			height: 32px;
		}
		th>.cell {
			color: #62778C;
		}
		td>div {
			color: #333;
		}
		.cell,
		th>div {
			padding-left: 10px;
			text-align: left;
		}
		.el-table__expand-icon {
			height: 31px;
		}
		.el-icon-arrow-right {
			border: 6px solid transparent;
			border-left-color: #333;
			&:before {
				content: "";
			}
		}
		.el-input__inner {
			height: 24px;
			border-radius: 2px;
		}
		.input-name {
			width: 280px;
		}
		.input-child-name {
			width: 250px;
		}
		.el-table__expanded-cell {
			padding: 0;
			background: #fff;
			box-shadow: none;
			&:hover {
				background: #fff;
			}
			.expanded-box.active {
				background: #EEF6FD;
			}
			.expanded-box:not(:last-child) {
				overflow: hidden;
				border-bottom: 1px solid #dfe6ec;
			}
			.expanded {
				box-sizing: border-box;
				float: left;
				height: 32px;
				line-height: 31px;
				padding-left: 10px;
				text-align: left;
				&:nth-child(2) {
					margin-left: 37px;
					width: 445px;
				}
				&:nth-child(3) {
					width: 267px;
				}
				&:nth-child(4) {
					width: 307px;
				}
			}
			svg {
				vertical-align: middle;
			}
		}
		.el-button--text {
			color: #7F7F7F;
			&:hover {
				color: #0070C9;
			}
			&:active {
				color: #005396;
			}
			&.btn-delete {
				color: #0070C9;
				&:hover {
					text-decoration: underline;
				}
				&:active {
					text-decoration: underline;
				}
			}
		}
		.iconfont {
			vertical-align: middle;
		}
		.warn {
			input {
				border-color: #EE6827;
				&::-webkit-input-placeholder {
					color: #EE6827;
				}
				&::-moz-placeholder {
					color: #EE6827;
				}
				&:-moz-placeholder {
					color: #EE6827;
				}
				&:-ms-input-placeholder {
					color: #EE6827;
				}
			}
		}
	}
</style>